<template>
  <PageView>
    <el-page-header class="app-page-nav" content="个人信息" @back="navBackClicked"></el-page-header>
    <div
        v-for="(item, index) in showDatas"
        :key="index"
    >
      <!--  该分类是否全选了    -->
      <el-checkbox v-model="item.isSelect" @change="checkAllWithIndex(index)">全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="item.selectIds" @change="checkItems($event, index)">
        <!--  分类下的选项      -->
        <el-checkbox
            v-for="itemDetail in item.datas"
            :label="itemDetail.TagID"
            :key="itemDetail.TagID"
            :checked="itemDetail.isSelect"
            :disabled="itemDetail.disabled"
        >
          {{itemDetail.TagName}}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <el-divider></el-divider>
    <div class="page-footer">
      <el-button type="primary" @click="settingBtnClicked">个人信息设置</el-button>
    </div>
  </PageView>
</template>

<script>
import { ArrowLeftBold } from '@element-plus/icons';
export default {
  name: "userInfo",
  components:{
    ArrowLeftBold,
  },
  props:{

  },
  data() {
    return {
      // 数据源数组
      dataSource:[],
      // 专门用控制于UI展示的数据
      showDatas:[],

      info:'我爱你<br/>中国'
    }
  },
  mounted() {
    this.uploadDataReq()
  },
  methods:{
    uploadDataReq() {
      let dataSource = []
      let arr = ['学前', '小学', '小学(五四制)', '初中', '初中(五四制)', '高中' , '特殊教育', '职业教育']
      for (let i = 0; i < arr.length; i++) {
        let tagId = i + 1
        const temp = {
          TagTypeID:1,
          TagTypeName:'学段',
          TagID:tagId,
          TagName:arr[i]
        }
        dataSource.push(temp)
      }

      let lastCount = arr.length
      arr = ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级', '高一', '高二', '高三']

      for (let i = 0; i < arr.length; i++) {
        let tagId = lastCount + i + 1
        const temp = {
          TagTypeID:2,
          TagTypeName:'年级',
          TagID:tagId,
          TagName:arr[i]
        }
        dataSource.push(temp)
      }

      lastCount += arr.length
      arr = ['语文', '数学', '英语', '思想政治', '历史', '地理', '物理', '生物学', '化学', '信息技术']

      for (let i = 0; i < arr.length; i++) {
        let tagId = lastCount + i + 1
        const temp = {
          TagTypeID:3,
          TagTypeName:'学科',
          TagID:tagId,
          TagName:arr[i]
        }
        dataSource.push(temp)
      }
      this.dataSource = dataSource
      this.fliterData()
      console.log('dataSource:', dataSource)
    },

    /**
     * 导航返回按钮点击事件
     */
    navBackClicked() {
      this.$tab.closeOpenPage('/user/user')
    },

    /**
     * 判断目标数据源里面是否包含目标分类名称
     * @param typeName
     * @param allTypes
     * @returns {*}
     */
    isHasTargetType(typeName, allTypes) {
      return allTypes.some(item => item.typeName == typeName)
    },

    /**
     * 分离出分类数据 - 分组的概念
     */
    fliterData() {
      let allTypes = []
      for (const item of this.dataSource) {
        let isIn = this.isHasTargetType(item.TagTypeName, allTypes)
        if (!isIn) {
          let typeInfo = {
            typeName:item.TagTypeName,
            typeId:item.TagTypeID,
          }
          allTypes.push(typeInfo)
        }
      }
      // console.log('allTypes:', allTypes)

      let showDatas = []
      for (const typeInfo of allTypes) {
        let typesIn = this.getDataByTypeName(typeInfo.typeName)
        let obj = {
          typeName: typeInfo.typeName,
          typeId:typeInfo.typeId,
          datas:typesIn,
          // 是否选择全部 默认false
          isSelect:false,
          // 用来标记其下所有选择的细小分类id
          selectIds:[],
        }
        showDatas.push(obj)
      }
      this.showDatas = showDatas
      console.log('showDatas:', showDatas)

      // 测试选中目标数据
      let targets = []
      for (let i = 0; i < 20; i++) {
        const temp = {
          TagID: i + 1
        }
        targets.push(temp)
      }
      this.updateTargetDatasToSelect(targets)

      // 禁用的数据源
      let disabledDatas = [
        [{'TagID':1}],
        [{'TagID':9}],
      ]
      this.updateItemsDisabledByDatas(disabledDatas)
    },

    /**
     * 根据数组 将目标数据转化为选中状态
     * @param datas
     */
    updateTargetDatasToSelect(datas) {
      const arr = this.showDatas
      console.log('updateTargetDatasToSelect:', datas)
      // 更新指定id的细分数据为选中状态
      for (const data of datas) {
        for (let i = 0; i < arr.length; i++) {
          let typeInfo = arr[i]
          let targetItem = this.getTargetInfoByTagId(data.TagID, typeInfo.datas)
          if (targetItem) {
            targetItem.isSelect = true
          }
        }
      }

      // 可能有多个选中 会触发该分类下全选
      for (const index in arr) {
        console.log('index:', index)
        const typeInfo = arr[index]
        typeInfo.selectIds = this.getSelectIdsInTypeWithIndex(index)
        typeInfo.isSelect = typeInfo.selectIds.length == typeInfo.datas.length
      }
    },

    getTargetInfoByTagId(tagId, arr) {
      let targetItem = {}
      for (const item of arr) {
        if (item.TagID == tagId) {
          targetItem = item
         break
        }
      }
      return targetItem
    },

    /**
     * 根据分类名称 获取该分类下的所有标签数据
     * @param typeName
     * @returns {*[]}
     */
    getDataByTypeName(typeName) {
      let arr = []
      for (const item of this.dataSource) {
        if (item.TagTypeName == typeName) {
          item.isSelect = false
          arr.push(item)
        }
      }
      return arr
    },

    /**
     * 根据分类索引获取其下所有选择的ids
     * @param index
     */
    getSelectIdsInTypeWithIndex(index) {
      let typeInfo = this.showDatas[index]
      let datas = typeInfo.datas
      let arr = []
      for (const data of datas) {
        if (data.isSelect) {
          arr.push(data.TagID)
        }
      }
      console.log("某个分类下所有已经选择的分类明细：", arr)
      return arr
    },

    /**
     * 当选择第一个分类后 更新后续分类中不能选择项
     * @param datas 后台返回的不能点击的数据源数组
     */
    updateItemsDisabledByDatas(datas) {
      let needChangeDatas = []
      for (const data of datas) {
        console.log('data:', data)
        for (const item of data) {
          needChangeDatas.push(item)
        }
      }
      console.log('needChangeDatas', needChangeDatas)

      const dataSources = this.dataSource
      dataSources.forEach(item => {
        let isIn = this.isInDisableDatasById(item.TagID, needChangeDatas)
        console.log('需要禁用：', isIn)
        item.disabled = isIn;
      })
    },

    /**
     * 判断目标标签是否在禁点的数据里面
     * @param tagId
     * @param needChangeDatas
     * @returns {*}
     */
    isInDisableDatasById(tagId, needChangeDatas) {
      return needChangeDatas.some(item => item.TagID == tagId)
    },

    /**
     * 根据操作分类索引变更目标分类选择全部和取消选择（注意 要更改分类下选择的细分数据标记值selectIds）
     * @param index
     */
    checkAllWithIndex(index) {
      console.log('操作分类全选按钮索引:', index)
      const arr = this.showDatas
      let typeInfo = arr[index]
      console.log('typeInfo:', typeInfo)

      let datas = typeInfo.datas
      datas.forEach(item => item.isSelect = typeInfo.isSelect)
      if (typeInfo.isSelect) {
        typeInfo.selectIds = this.getSelectIdsInTypeWithIndex(index)
      } else {
        typeInfo.selectIds = []
      }
    },

    /**
     * 选择某个分类下的标签 注意：会主动去触发分类是否全选或者取消全选 此时分类下selectIds已经是最新
     */
    checkItems(value, index) {
      console.log('操作某个具体分类标签选择:', value, index)
      const arr = this.showDatas
      let typeInfo = arr[index]
      typeInfo.isSelect = value.length == typeInfo.datas.length
    },

    settingBtnClicked() {
      this.$router.push('/main/userInfoSetting')
    },
  }
}
</script>

<style lang="scss" scoped>
.app-page-nav {
  display: flex;
  align-items: center;
  padding: 15px 0;
  //margin: auto 0;
  background: #0064E6;
  //font-size: 14px;

  // 吸顶处理
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
  border-bottom: 1px solid #ededed;

  .nav-info {
    margin: auto 0;
  }

  .el-icon-back {
    display: block;
    height: 16px;
    width: 16px;
  }


  .nav-back {

  }

  .nav-title {
    font-size: 18px;
    font-weight: 500;
  }
}

</style>
